
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html>
<html>

	<head>
		<link rel="stylesheet" href="css/categoryAdd.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引用Vue -->
		
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		
		<script type="text/javascript" src="js/axios.js"></script>
		<script type="text/javascript" src="js/qs.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			
			.app {
				width: 750px;
				height: auto;
				font-size: 12px;
				background-color: #EBEFF2;
			}
			
			.title{
				width: 98%;
				height: 50px;
				margin: 10px auto;
				border-bottom: 2px solid gray;
				margin-bottom: 10px;
			}
			.curr{
				width: 98%;
				height: 30px;
				margin: 10px auto;
				vertical-align: middle;
			}
			
			.title h4 {
				font-size: 18px;
				font-weight: 500;
				color: #000 !important;
				margin-top: 10px;
			}
			
		</style>
	</head>
	<body>
		<div id="app" class="app">
			<div class="title">
				<h4 style="float: left;">分类设置</h4>
				
			</div>
			<div class="curr">当前分类：产品类别->${ca.catName}</div>
			<table class="table table-bordered table-hover">
                <thead>
                <tr>
                    <th class="th-inner"><h4>操作：</h4></th>
                    <th class="th-inner"></th>
                </tr>
                </thead>
                <el-form ref="form" :model="form">
                <tbody><tr>
                    <td class="text-right">添加下级分类：</td>
                    <td>
                        <div class="input-group" prop="lowname">
                            <el-input v-model="form.lowname"></el-input>
                    <span class="input-group-btn">
                    <el-button @click="addname('form')">添加</el-button>
                       <!--  <input name="B2" class="btn" type="submit" value="添加"> -->
                    </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-right">修改分类名称：</td>
                    <td>
                        <div class="input-group" prop="upname">
                            <el-input v-model="form.upname"></el-input>
                    <span class="input-group-btn">
                    	<el-button @click="updatename('form')">改名</el-button>
                       <!--  <input name="B1" class="btn" type="submit" value="改名"> -->
                    </span>
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="text-right">删除分类：</td>
                    <td>
                        <input name="B3" type="hidden" value="">
                        <button name="bb" class="btn" type="button" @click=del()>删除</button> 删除前请处理该分类下的产品数据
                    </td>
                </tr>
            </tbody>
            </el-form>
            </table>
  
		</div>
		<script>
			var vm = new Vue({
				el: "#app",
				data() {
					return {
						form: {
							lowname: '',
							upname:'',
							id:${ca.catId}
						},
					}
				},
				methods: {
					//修改
					updatename(formName) {
						var id = ${ca.catId};
				    	//验证方法
				        this.$refs[formName].validate((valid) => {
				          if (valid) {
				        	  //post提交数据
				           	axios.post("/editcatname",
				           			//参数转换
				           			Qs.stringify(this.form,{arrayFormat: 'brackets'})
				           			//ajax请求成功的回调函数
				           			).then(function(v){
				           			window.parent.location.replace("/querycategory");
				           			console.log("回调成功，获取了服务器端返回的值v");
				           	}).catch(function(e){
				           		alert("出错了"+e);
				           	});
				        	  
				        	  
				          } else {
				            console.log('error submit!!');
				          }
				        });
				      },
				      //添加
				      addname(formName) {
							var id = ${ca.catId};
					    	//验证方法
					        this.$refs[formName].validate((valid) => {
					          if (valid) {
					        	  //post提交数据
					           	axios.post("/addca",
					           			//参数转换
					           			Qs.stringify(this.form,{arrayFormat: 'brackets'})
					           			//ajax请求成功的回调函数
					           			).then(function(v){
					           			window.parent.location.replace("/querycategory");
					           			console.log("回调成功，获取了服务器端返回的值v");
					           	}).catch(function(e){
					           		alert("出错了"+e);
					           	});
					        	  
					        	  
					          } else {
					            console.log('error submit!!');
					          }
					        });
					      },
					      //删除分类
					      del:function(id){
					    	  var id = ${ca.catId};
					    	  var r = confirm("您是否确认删除");
								if (r == true) {
									axios.post("/delca",
						           			//参数转换
						           			Qs.stringify({'id':id},{arrayFormat: 'brackets'})
						           			//ajax请求成功的回调函数
						           			).then(function(v){
						           				window.parent.location.replace("/querycategory");
							           			console.log("回调成功，获取了服务器端返回的值v");
							           	}).catch(function(e){
							           		alert("出错了"+e);
							           	});
								}
					      }   
					      
				}
			});
		</script>
	</body>

</html>